<template>
	<view>
		<view class="headinfo">
			<view class="userinfo">
				<view class="cont webkit">
					<image class="face" :src="res.avatar"></image>
					<view class="info">
						<view class="title" v-cloak>{{res.nick_name}}</view>
						<view class="text" v-cloak>推荐人：{{res.referee}}</view>
						<view class="text" style="position: absolute; line-height: 50upx;overflow: hidden;" v-cloak>
							我的等级：{{res.level}}
							<image src="../../../static/qiapian.png" style="width: 35upx;height: 35upx;margin-left: 15upx;vertical-align: middle;"
							:hover-class="active" @click="jump" data-src="./projcommision/sign"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="treatment">
				<text class="welfare">
					<text class="iconfont color_f55">&#xe654;</text>
					<text class="color_f55">分红权</text>
				</text>
				<text class="wage color_aaa">
					<text class="iconfont">&#xe654;</text>
					<text>工资</text>
				</text>
				<text class="insurance color_aaa">
					<text class="iconfont">&#xe654;</text>
					<text>五险一金</text>
				</text>
			</view>
		</view>
		<view class="linecontain">
			<view class="linetotle">
				<view class="num" v-cloak>
					{{res.tx_money}}
				</view>
				<view class="yuan">服务商成功提现金额(元)</view>
			</view>
			<view class="linetotle nowget">
				<view class="linetotle_left">
					<view class="num" v-cloak>{{res.a_kzp}}</view>
					<view class="yuan">服务商可提现金额(元)</view>
				</view>
				<view class="linetotle_right">
					<button style="border-radius: 40upx;height: 64upx;line-height: 64upx;
					width: 160upx;color:#fff;border: 1upx solid #E96720;
					margin-top: 40upx;box-sizing: content-box;padding: 0;background-color: #FEA23F;
					font-size: 26upx;text-align: center;" :hover-class="active" @click="jump_getmoney" data-src="./projcommision/get_money">立即提现</button>
				</view>
			</view>
		</view>
		<view class="external">
			<view class="money_left">
				<view class="fui_block fui_block_1">
					<view class="fui_block_one">
						<text class="iconfont">&#xe601;</text>
					</view>
					<view class="fui_block_two">
						<view>可支配金额</view>
						<view><text class="yellow" v-cloak>{{res.a_kzp}}</text>元</view>
					</view>
				</view>
				<view class="fui_block">
					<view class="fui_block_one">
						<text class="iconfont fui_block_one_getnow">&#xe67c;</text>
					</view>
					<view class="fui_block_two details" :hover-class="active" @click="jump" data-src="./projcommision/details">
						提现明细
					</view>
				</view>
			</view>
			<view class="money_right">
				<view class="fui_block fui_block_3">
					<view class="fui_block_one">
						<text class="iconfont addwidth">&#xe60a;</text>
					</view>
					<view class="fui_block_two" :hover-class="active" @click="jump" data-src="./projcommision/projcommision">
						<view>分享提成</view>
						<view>
							<text class="yellow" v-cloak>{{res.tc_count}}</text>
							<text class="lightgray">单</text>
						</view>
					</view>
				</view>
				<view class="fui_block fui_block_4">
					<view class="fui_block_one">
						<text class="iconfont team">&#xe62d;</text>
					</view>
					<view class="fui_block_two details" :hover-class="active" @click="jump" data-src="./projcommision/myteam">
						我的团队
					</view>
				</view>
			</view>
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../business/business">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<text class="iconfont">&#xe601;</text>
					<text class="text">业务提成</text>
				</view>
			</view>
			<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="./projcommision/dividend">
				<view class="uni-list-cell-navigate uni-navigate-right">
					<text class="iconfont">&#xe601;</text>
					<text class="text">分红中心</text>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				res:[],
				openid:'',
				active:"active"
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=acommsion&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						uni.hideLoading()
						this.res = res.data
						console.log(this.res.a_kzp)
						if(this.res.upnickname == null){
							this.res.upnickname = '中融建盟'
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(e){
				var src =e.currentTarget.dataset.src
				uni.navigateTo({
					url: src
				});
			},
			jump_getmoney(e){
				if (Number(this.res.a_kzp) >= 100) {
					var src =e.currentTarget.dataset.src
					uni.navigateTo({
						url: src
					});
				}
				else {
					// 弹窗
					uni.showModal({
					content: '不满100元不能提现哦~~',
					showCancel: false,
					confirmColor:"#DD524D",
					success(res) {
						if (res.confirm) {
							return
							}
						}
					})
				}
			}
		}
	}
</script>

<style>

.num,.yuan{margin-left: 20upx;margin-right: 20upx;}
.num {
	font-size: 40upx;
	color: #ff8000;
}
.nowget {
	display: flex;
}
.linetotle .yuan {
	font-size: 29upx;
	border-bottom: 1px solid #ccc;
	height: 35px;
}
.linetotle_left {
	flex: 60%;
}
.linetotle_left .yuan {
	border-bottom: none;
}
.linetotle_right {
	flex: 20%;
}
.external {
	height: 280upx;
	background-color: #fff;
	display: flex;
	margin-bottom: 20upx;
}
.money_left ,.money_right{
	flex: 1;
}
.fui_block {
	height: 140upx;
	display: flex;
}
.fui_block_one {
	box-sizing: border-box;
	margin-top: 20upx;
	margin-left: 20upx;
	flex: 30%;
}
.fui_block_3 {
	border-bottom: 1upx solid #eee;
}
.fui_block_one .iconfont {
	color: #FF0000;
	margin-top: 40upx;
	font-size: 65upx;
}
.fui_block .fui_block_one .addwidth {
	font-size: 80upx;
	line-height: 120upx;
	color: #007AFF;
	opacity: 0.5;
}
.fui_block_two {
	box-sizing: border-box;
	margin-top: 20upx;
	margin-left: 20upx;
	flex: 70%;
}
.details {
	line-height: 100upx;
}
.yellow {
	color: #FEB312;
}
.lightgray {
	color: #999;
}
.uni-navigate-right .iconfont {
	color: orange;
}
.fui_block_one .fui_block_one_getnow {
	color: rgb(254, 162, 63);
}
.fui_block_one .team {
	color: #FFB400;
	margin-left: 5upx;
}
.fui_block_1 {
	border-bottom: 1upx solid #eee;
}
.color_aaa {
color:#aaa;
}
.color_f55 {
	color:#f55;
}
.linecontain {
	margin-bottom:20upx;
}
.linetotle {
	background-color:#FFFFFF;
}
.treatment text {
	flex:1;
	text-align:center;
	background-color:#FFFFFF;
}

.treatment {
	height:100upx;
	line-height:100upx;
	display:flex;
	justify-content:space-between;
	margin-bottom:20upx;
}
.coinlist {
	background:#fff;
	margin-top:20upx;
	padding:20upx 0;
}
.coinlist .webkit {
	width:50%;
	float:left;
	padding:20upx 24upx;
	box-sizing:border-box;
}
.coinlist .webkit:nth-child(2n + 1) {
	border-right:1px solid #eaeaea;
}
.coinlist .webkit image {
	width:72upx;
	height:72upx;
	margin-right:20upx;
	margin-top:6upx;
}
.coinlist .webkit view text {
	display:block;
	font-size:24upx;
}
.coinlist .webkit view .num {
	color:#feb312;
}
.yqm {
	padding:32upx 24upx;
	background:#fff;
}
.yqm image {
	width:50upx;
	height:50upx;
	display:block;
	margin-right:10upx;
}
.yqm text {
	display:block;
}
.headinfo {
	background-image: linear-gradient(to bottom right, rgb(252, 9, 29), rgba(247, 192, 11, 0.904));
}
.headinfo .userinfo {
	min-height:160upx;
	padding:12upx 24upx;
	border-bottom:2upx solid #FEA23D;
	position:relative;
}
.headinfo .userinfo .cont {
	padding:0;
	padding-top:20upx;
	padding-bottom:20upx;
}
.headinfo .userinfo .cont .face {
	width:120upx;
	height:120upx;
	border-radius:50%;
	margin-top:12upx;
	margin-right:30upx;
}
.headinfo .userinfo .cont .info {
	line-height:initial;
}
.headinfo .userinfo .cont .info text {
	display:block;
	margin-top:10upx;
}
.headinfo .userinfo .cont .info .title {
	color:#fff;
	font-size:28upx;
	font-weight:bold;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	margin-top:10upx;
}
.headinfo .userinfo .cont .info .text {
	color:#fff;
	font-size:22upx;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
.headinfo .userinfo .cont .info .subtitle {
	color:#fff;
	font-size:22upx;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	width:auto;
	display:inline-block;
	border:2upx solid #fff;
	border-radius:36upx;
	max-width:100%;
	padding:0 14upx;
}
.uni-list-cell.active {
	background:#f5f5f5;
}
.uni-list image {
	width:34upx;
	height:34upx;
}
.uni-list .text {
	position:absolute;
	left:84upx;
	font-size:26upx;
}
.uni-list {
	margin-top:20upx;
}
.uni-list:before,.uni-list:after {
	display:none;
}
.uni-list-cell:after {
	content:" ";
	position:absolute;
	left:0.5rem;
	right:0.5rem;
	bottom:-1px;
	height:1px;
	border-top:1px solid #ebebeb;
	color:#D9D9D9;
	-webkit-transform-origin:0 0;
	-ms-transform-origin:0 0;
	transform-origin:0 0;
	-webkit-transform:scaleY(0.5);
	-ms-transform:scaleY(0.5);
	transform:scaleY(0.5);
	background:none;
}
.uni-list-cell .right {
	font-size:24upx;
	color:#999;
	margin-right:20upx;
}
.uni-list .uni-list-cell:last-child:after {
	border:0;
}
.money_left {
	border-right: 1upx solid #eee;
} 
</style>